<template>
    <div class="total">
            <mu-flexbox :gutter='0'>
                <mu-flexbox-item class="allcheck d">
                <mu-checkbox label="全选" class="demo-checkbox" v-model="allcheck" @change='changall'/> <br/>
                </mu-flexbox-item>
                <mu-flexbox-item class="money d" basis='30%'>
                    <p class="a">合计<span>￥{{total}}</span></p>
                    <p class="b">总额<span>￥{{total}}</span>；立即减0.00</p>
                </mu-flexbox-item>
                <mu-flexbox-item class="settle d" basis='10%'>
                    <mu-raised-button label="去结算" class="demo-raised-button" primary/>
                </mu-flexbox-item>
            </mu-flexbox>
    </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
    export default {
        data(){
            return{
            }
        },
        computed:{
            ...mapGetters([
                'cart',
                'goodslength',
                'islogin',
                'value',
                'total',
                'allcheck'
            ]),
        },
        methods:{
            changall(){
                //向父组件触发事件
                 this.$emit('total')
            }
        }
    }
</script>
<style lang="less" >
    .total{
        position: fixed;
        bottom:0;
        display: flex;
        width: 100%;
        height: 50px;
        background-color: #fff;
        .d{
            text-align: center;
            .mu-checkbox-icon{
                    margin-right: 5px;
            }
        }
        .allcheck{
            padding-top: 10px;
            padding-left: 5px;
        }
        .money{
            text-align:left;
            padding-left: 10px;
            p{
                margin: 0;
                padding: 0;
            }
            .a{
                span{
                    color: #009688;
                }
            }
            .b{
                font-size: 12px;
            }
        }
        .settle{
            .demo-raised-button{
                height: 43px;
                font-size: 18px;
                width: 100%;
            }
        }
    }
</style>